<template>
  <view class="container-test">

    <scroll-view scroll-x class="top-swiper-tab">
      <view v-for="(categorie,index) in top_categories" v-bind:key="categorie.id" class="top-swiper-tab-list"
            v-bind:class="{'on':currentTopTab==index}" v-bind:data-current="index" @click="switchTopNav($event)">
        {{categorie.name}}
      </view>
    </scroll-view>


    <div>
      <view class="second-swiper-tab">
        <view v-for="(categorie,index) in second_categories" v-bind:key="categorie.id" class="second-swiper-tab-list"
              v-bind:class="{'second_swiper_tap_on':currentSecondTab==index}" v-bind:data-current="index"
              @click="switchSecondNav($event)">
          {{categorie.title}}
        </view>
      </view>

      <!--<swiper v-bind:style="{height: swiperHeight+'px'}">-->
      <!--<swiper-item v-for="(categorie,index) in second_categories" v-bind:key="categorie.id" class="gank-swiper-item">-->
      <!--<gank_qdaily_list v-bind:html-list="current_page_datas"></gank_qdaily_list>-->
      <!--</swiper-item>-->
      <!--</swiper>-->

      <ul>
        <li v-for="(page ,index) in currentRaw" v-bind:key="index">
          <gank_qdaily_item v-bind:html="page"></gank_qdaily_item>
        </li>
      </ul>
    </div>

  </view>


</template>
<script>
  import gank_qdaily_item from "../../components/gank-qdaily-item";

  export default {

    components: {
      gank_qdaily_item
    },
    data() {
      return {
        currentTopTab: 0,
        currentSecondTab: 0,
        top_categories: [],
        second_categories: [],
        current_page_datas: []
      };
    },
    computed: {
      swiperHeight: function() {
        return wx.getSystemInfoSync().windowHeight - 24;
      },
      currentRaw: function() {
        return this.current_page_datas.map(item => {
          // return JSON.parse(item).summary.content;
          return item.raw
        });
      }
    },
    methods: {
      switchTopNav(e) {
        if (this.currentTopTab === e.target.dataset.current) {
          return false;
        } else {
          this.currentTopTab = e.target.dataset.current;
          this.onTopCategoryChange(this.top_categories[this.currentTopTab].en_name);
          this.currentSecondTab = 0;
        }
      },
      switchSecondNav(e) {
        if (this.currentSecondTab === e.target.dataset.current) {
          return false;
        } else {
          this.currentSecondTab = e.target.dataset.current;
          this.onSecondCategoryChange(this.second_categories[this.currentSecondTab].id);
        }
      }
      ,
      bindChange(e) {
        this.currentTopTab = e.target.dataset.current;
      },
      onTopCategoryChange(top_category_name) {
        return this.hackFly.get("http://gank.io/api/xiandu/category/" + top_category_name)
          .then((res) => {
            console.log(res);
            this.second_categories = res.data.results;
            return this.onSecondCategoryChange(res.data.results[0].id);
          }).catch((err) => {
            console.log(err);
          });

      },
      onSecondCategoryChange(second_category_name) {
        return this.hackFly.get("http://gank.io/api/xiandu/data/id/" + second_category_name + "/count/10/page/1")
          .then((res) => {
            console.log(res);
            this.current_page_datas = res.data.results;
          }).catch((err) => {
            console.log(err);
          });
      }

    },
    created() {

    },
    onLoad() {
      this.hackFly.get("http://gank.io/api/xiandu/categories").then((res) => {
        console.log(res);
        this.top_categories = res.data.results;
        return this.onTopCategoryChange(res.data.results[0].en_name);
      }).catch(reason => {
        console.log(reason);
      });
    }

  };


</script>

<style scoped>
  .container-test {
  }

  .top-swiper-tab {
    white-space: nowrap;
  }

  .top-swiper-tab-list {
    width: 30%;
    display: inline-block;
    text-align: center;
  }

  .second-swiper-tab {
    padding: 15px;
    width: 100%;
    flex-wrap: wrap;
    display: inline-flex;
  }

  .second-swiper-tab-list {
    text-align: center;
    margin: 3px;
    border: 5rpx solid #7cba23;
    border-radius: 3px;
    color: #7cba23;
    padding: 2px;
  }

  .second_swiper_tap_on {
    color: white;
    background-color: #7cba23;

  }

  .on {
    color: #7cba23;
    border-bottom: 5rpx solid #7cba23;
  }

  .gank-swiper {
    height: 750rpx;
  }

  .gank-swiper-item {
    background-color: #7cba23;
  }

  .div-gank-swiper-item {
    height: 100%;
    text-align: center;
    background-color: bisque;
  }
</style>
